<template>

  <el-card>


    <el-row>
      <el-col :span="24">
        <!--查询部分-->
        <el-form inline label-width="90px" size="mini" class="demo-form-inline">

          <el-form-item label="款项名称">
            <el-input placeholder="请输入款项名称" v-model.trim="searchBillParam.purpose" clearable size="mini"></el-input>
          </el-form-item>

          <el-form-item label="账单类型">
            <el-select v-model="searchBillParam.typeIdList" placeholder="请选择账单类型" :filterable="true" clearable multiple>
              <el-option
                v-for="item in billTypeIdList"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="开始时间">
            <el-date-picker
              clearable
              v-model="searchBillParam.triggerTimeStart"
              placement="bottom-start"
              type="date"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              placeholder="选择日期">
            </el-date-picker>
          </el-form-item>

          <el-form-item label="结束时间">
            <el-date-picker
              clearable
              v-model="searchBillParam.triggerTimeEnd"
              placement="bottom-start"
              type="date"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              placeholder="选择日期">
            </el-date-picker>
          </el-form-item>

          <el-form-item label="大于金额">
            <el-input-number placeholder="请输入金额" v-model.trim="searchBillParam.priceStart" clearable size="mini"></el-input-number>
          </el-form-item>

          <el-form-item label="小于金额">
            <el-input-number placeholder="请输入金额" v-model.trim="searchBillParam.priceEnd" clearable size="mini"></el-input-number>
          </el-form-item>

          <el-form-item label="支出or收入">
            <el-select v-model.trim="searchBillParam.incomeOrExpenditure" placeholder="请选择类型" clearable>
              <el-option label="支出" :value="1"></el-option>
              <el-option label="收入" :value="2"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="是否入账">
            <el-select v-model.trim="searchBillParam.entry" placeholder="请选择是否入账记录" clearable>
              <el-option label="不入账" :value="1"></el-option>
              <el-option label="入账" :value="2"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="核心账单">
            <el-select v-model.trim="searchBillParam.core" placeholder="请选择核心关键账单" clearable>
              <el-option label="非核心" :value="1"></el-option>
              <el-option label="核心账单" :value="2"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="支出方式">
            <el-select v-model.trim="searchBillParam.modeOfExpenditure" placeholder="请选择支出方式" clearable>
              <el-option label="线上" :value="1"></el-option>
              <el-option label="线下" :value="2"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="使用人">
            <el-select v-model="searchBillParam.userIdList" placeholder="请选择使用人" multiple clearable>
              <el-option
                v-for="item in memberFamilyList"
                :key="item.id"
                :label="item.userName"
                :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="账单组">
            <el-select v-model="searchBillParam.groupId" placeholder="请选择账单组" clearable>
              <el-option
                v-for="item in billGroupList"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" size="mini" @click="getCustomBillList">查询</el-button>
            <el-button type="warning" size="mini" @click="resetQueryBill">重置</el-button>
          </el-form-item>

        </el-form>
      </el-col>
    </el-row>



    <el-row>
      <el-col :span="12" class="echarts-table">
        <el-descriptions title="自定义查询支出、收入数量以及笔数" :column="2" :size="size" border>
          <el-descriptions-item label="支出金额">{{customExpenditure.data.expenditure}}</el-descriptions-item>
          <el-descriptions-item label="收入金额">{{customExpenditure.data.income}}</el-descriptions-item>
          <el-descriptions-item label="支出的笔数">{{customExpenditure.data.expenditureNum}}</el-descriptions-item>
          <el-descriptions-item label="收入的笔数">{{customExpenditure.data.incomeNum}}</el-descriptions-item>
        </el-descriptions>

        <el-table
          :data="customExpenditurePerson.data"
          border
          style="width: 100%">
          <el-table-column
            prop="userName"
            label="家庭人员"
            >
          </el-table-column>
          <el-table-column
            prop="expenditure"
            label="支出总金额"
          >
          </el-table-column>
          <el-table-column
            prop="income"
            label="收入总金额"
          >
          </el-table-column>
          <el-table-column
            prop="surplus"
            label="盈余(收入-支出)"
          >
          </el-table-column>
          <el-table-column
            prop="expenditureNum"
            label="支出笔数"
          >
          </el-table-column>
          <el-table-column
            prop="incomeNum"
            label="收入笔数"
          >
          </el-table-column>
        </el-table>
      </el-col>

      <el-col :span="12">
        <div class="echarts-title">自定义查询支出、收入数量以及笔数</div>
        <!--自定义查询支出、收入 饼图 -->
        <div id="customExpenditure" class="echarts-content"></div>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="24">
        <div class="echarts-title">自定义查询每个家庭成员的支出情况</div>
        <div id="customExpenditurePerson" style="width: 100%; height: 600px"></div>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="12">
        <!--自定义查询收入分类情况 -->
        <div id="customRevenueClassification" class="echarts-content"></div>
      </el-col>

      <el-col :span="12">
        <!--自定义查询的支出分类情况 -->
        <div id="customExpenditureClassification" class="echarts-content"></div>
      </el-col>
    </el-row>


  </el-card>

</template>

<script>

  /*
    全局引入echar import * as echarts from 'echarts'
    Vue.prototype.$echarts=echarts
    初始化  let myChart = this.$echarts.init(DOM)
  * */

  // 局部引入
  import * as echarts from 'echarts'
  // import echarts from 'echarts'
  import http from '@/utils/http'

  export default {
    // 自定义查询账单统计
    name: "CustomBill",
    data(){
      return {
        size: 'mini',
        // 账单类型
        billTypeIdList: [],
        // 家庭成员
        memberFamilyList: [],
        // 账单组
        billGroupList: [],
        // 查询参数
        searchBillParam: {
          purpose: null,
          typeId: null,
          groupId: null,
          triggerTimeStart: null,
          triggerTimeEnd: null,
          priceStart: null,
          priceEnd: 1000000,
          incomeOrExpenditure: null,
          entry: null,
          core: null,
          modeOfExpenditure: null,
          userIdList: null,
          typeIdList: null,
        },
        // 自定义查询总统计
        customExpenditure: {
          // 原始数据
          data: {},
          // 支出的笔数
          expenditureNum: 0,
          // 收入的笔数
          incomeNum: 0,
          // 总的支出金额
          expenditure: 0,
          // 总的收入金额
          income: 0,
        },
        // 自定义查询收入分类情况
        customRevenueClassification: {
          // 类似数据 ['张三', '李四', '王五']
          legendData: [],
          // 类似  [{name:'张三', value:300}, {name:'李四', value:300},{name:'王五', value:300},],
          seriesData: [],
        },
        // 自定义查询的支出分类情况
        customExpenditureClassification: {
          // 类似数据 ['张三', '李四', '王五']
          legendData: [],
          // 类似  [{name:'张三', value:300}, {name:'李四', value:300},{name:'王五', value:300},],
          seriesData: [],
        },
        // 自定义每个家庭成员的支出、收入、笔数
        customExpenditurePerson: {
          // 原始数据
          data: [],
          // 标题部分，指示每个颜色的含义
          legendData: [],
          // 支出金额
          seriesExpenditure: [],
          // 支出笔数
          seriesExpenditureNum: [],
        }
      }
    },
    methods: {
      /**
       * 不分页查询全部的账单组
       */
      getBillingGroupList(){
        http.get("/bill/getBillingGroupList", {}).then(response => {
          let res = response.data;
          if (res.status === 'error'){
            // 401是token过期跳转的
            if (res.code !== 401){
              this.$message.error(res.msg);
            }
            return
          }

          this.billGroupList = res.data

        }).catch(error => {
          this.$message.error(error.message);
        })
      },
      /**
       * 重置查询条件
       */
      resetQueryBill(){
        this.searchBillParam = {
          purpose: null,
          typeId: null,
          groupId: null,
          triggerTimeStart: null,
          triggerTimeEnd: null,
          priceStart: null,
          priceEnd: 1000000,
          incomeOrExpenditure: null,
          entry: null,
          core: null,
          modeOfExpenditure: null,
          userIdList: null,
          typeIdList: null,
        }
      },
      /**
       * 查询账单
       */
      getCustomBillList(){
        this.getCustomExpenditure()
        this.getCustomRevenueClassification()
        this.getCustomExpenditureClassification()
        this.getCustomExpenditurePerson()
      },
      /**
       * 获取 家庭成员
       */
      getMemberFamilyAll(){
        http.get("/user/getMemberFamilyAll", {}).then(response => {
          let res = response.data;
          if (res.status === 'error'){
            // 401是token过期跳转的
            if (res.code !== 401){
              this.$message.error(res.msg);
            }
            return
          }

          this.memberFamilyList = res.data

        }).catch(error => {
          this.$message.error(error.message);
        })
      },
      /**
       * 获取账单类型
       */
      getBillType(){
        http.get("/bill/getBillType", {}).then(response => {
          let res = response.data;
          if (res.status === 'error'){
            // 401是token过期跳转的
            if (res.code !== 401){
              this.$message.error(res.msg);
            }
            return
          }

          this.billTypeIdList = res.data

        }).catch(error => {
          this.$message.error(error.message);
        })
      },
      /**
       * 初始化 每个家庭成员的支出、收入、笔数
       */
      initCustomExpenditurePerson(){
        let myChart = echarts.init(document.getElementById('customExpenditurePerson'));
        let option = {
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b}: {c} ({d}%)'
          },
          legend: {
            data: this.customExpenditurePerson.legendData
          },
          series: [
            {
              name: '支出详情',
              type: 'pie',
              selectedMode: 'single',
              radius: [0, '30%'],
              label: {
                position: 'inner',
                fontSize: 14
              },
              labelLine: {
                show: false
              },
              data: this.customExpenditurePerson.seriesExpenditure
            },
            {
              name: '笔数详情',
              type: 'pie',
              radius: ['45%', '60%'],
              labelLine: {
                length: 30
              },
              label: {
                formatter: '{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c}  {per|{d}%}  ',
                backgroundColor: '#F6F8FC',
                borderColor: '#8C8D8E',
                borderWidth: 1,
                borderRadius: 4,
                rich: {
                  a: {
                    color: '#6E7079',
                    lineHeight: 22,
                    align: 'center'
                  },
                  hr: {
                    borderColor: '#8C8D8E',
                    width: '100%',
                    borderWidth: 1,
                    height: 0
                  },
                  b: {
                    color: '#4C5058',
                    fontSize: 14,
                    fontWeight: 'bold',
                    lineHeight: 33
                  },
                  per: {
                    color: '#fff',
                    backgroundColor: '#4C5058',
                    padding: [3, 4],
                    borderRadius: 4
                  }
                }
              },
              data: this.customExpenditurePerson.seriesExpenditureNum
            }
          ]
        };
        myChart.setOption(option)
      },
      /**
       * 获取自定义查询每个家庭成员的支出、收入、笔数
       */
      getCustomExpenditurePerson(){
        http.post("/bill/getCustomExpenditurePerson", this.searchBillParam).then(response => {
          let res = response.data;
          if (res.status === 'error'){
            // 401是token过期跳转的
            if (res.code !== 401){
              this.$message.error(res.msg);
            }
            return
          }
          if (res.data){
            let legendData = []
            // 支出
            let seriesExpenditure = []
            // 支出笔数
            let seriesExpenditureNum = []
            for (let obj of res.data){
              // 循环支出的
              legendData.push(obj.userName + "支出金额")
              let expenditure = {'value': obj.expenditure, 'name': obj.userName + "支出金额"}
              seriesExpenditure.push(expenditure)

              // 循环笔数
              legendData.push(obj.userName + "支出笔数")
              let expenditureNum = {'value': obj.expenditureNum, 'name': obj.userName + "支出笔数"}
              seriesExpenditureNum.push(expenditureNum)
            }

            this.customExpenditurePerson.data = res.data
            this.customExpenditurePerson.legendData = legendData
            this.customExpenditurePerson.seriesExpenditure = seriesExpenditure
            this.customExpenditurePerson.seriesExpenditureNum = seriesExpenditureNum
          }
          this.initCustomExpenditurePerson()

        }).catch(error => {
          this.$message.error(error.message);
        })
      },
      /**
       * 初始化自定义查询的支出分类情况
       */
      initCustomExpenditureClassification(){
        let myChart = echarts.init(document.getElementById('customExpenditureClassification'));
        let option = {
          title: {
            text: '支出分类类型',
            subtext: '支出/元',
            left: 'center'
          },
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)'
          },
          legend: {
            type: 'scroll',
            orient: 'vertical',
            right: 10,
            top: 20,
            bottom: 20,
            data: this.customExpenditureClassification.legendData
          },
          series: [
            {
              name: '分类名称',
              type: 'pie',
              radius: '55%',
              center: ['40%', '50%'],
              data: this.customExpenditureClassification.seriesData,
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
        };
        myChart.setOption(option)
      },
      /**
       * 自定义查询的支出分类情况
       */
      getCustomExpenditureClassification(){
        http.post("/bill/getCustomExpenditureClassification", this.searchBillParam).then(response => {
          let res = response.data;
          if (res.status === 'error'){
            // 401是token过期跳转的
            if (res.code !== 401){
              this.$message.error(res.msg);
            }
            return
          }
          if (res.data){
            // 分类
            let title = []
            // 分类，金额
            let content = []
            // 支出笔数
            // let transactionsData = []
            for (let billGroupExpenses of res.data){
              title.push(billGroupExpenses.typeName)
              let obj = {'name': billGroupExpenses.typeName, 'value': billGroupExpenses.sumPrice}
              content.push(obj)
              // transactionsData.push(billGroupExpenses.countPrice)
            }
            // 分类支出类型
            this.customExpenditureClassification.legendData = title
            this.customExpenditureClassification.seriesData = content
            // 支出笔数
            // this.customExpenditureClassificationTransactions.xAxisData = title
            // this.customExpenditureClassificationTransactions.seriesData = transactionsData
          }

          this.initCustomExpenditureClassification()
          // this.initCustomExpenditureClassificationTransactions()

        }).catch(error => {
          this.$message.error(error.message);
        })
      },
      /**
       * 初始化自定义 收入分类情况
       */
      initCustomRevenueClassification(){
        let myChart = echarts.init(document.getElementById('customRevenueClassification'));
        let option = {
          title: {
            text: '收入分类情况',
            subtext: '收入/元',
            left: 'center'
          },
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)'
          },
          legend: {
            type: 'scroll',
            orient: 'vertical',
            right: 10,
            top: 20,
            bottom: 20,
            data: this.customRevenueClassification.legendData
          },
          series: [
            {
              name: '分类名称',
              type: 'pie',
              radius: '55%',
              center: ['40%', '50%'],
              data: this.customRevenueClassification.seriesData,
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
        };
        myChart.setOption(option)
      },
      /**
       * 自定义查询 收入分类情况
       */
      getCustomRevenueClassification(){
        http.post("/bill/getCustomRevenueClassification", this.searchBillParam).then(response => {
          let res = response.data;
          if (res.status === 'error'){
            // 401是token过期跳转的
            if (res.code !== 401){
              this.$message.error(res.msg);
            }
            return
          }
          if (res.data){
            let title = []
            let content = []
            for (let billGroupExpenses of res.data){
              title.push(billGroupExpenses.typeName)
              let obj = {'name': billGroupExpenses.typeName, 'value': billGroupExpenses.sumPrice}
              content.push(obj)
            }
            this.customRevenueClassification.legendData = title
            this.customRevenueClassification.seriesData = content
          }

          this.initCustomRevenueClassification()

        }).catch(error => {
          this.$message.error(error.message);
        })
      },
      /**
       * 初始化 自定义查询 统计
       */
      initCustomExpenditure(){
        let myChart = echarts.init(document.getElementById('customExpenditure'));
        let option = {
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b}: {c} ({d}%)'
          },
          legend: {
            data: ['收入', '支出', '支出笔数', '收入笔数']
          },
          series: [
            {
              name: '详情',
              type: 'pie',
              selectedMode: 'single',
              radius: [0, '30%'],
              label: {
                position: 'inner',
                fontSize: 14
              },
              labelLine: {
                show: false
              },
              data: [
                { value: this.customExpenditure.income, name: '收入' },
                { value: this.customExpenditure.expenditure, name: '支出', selected: true }
              ]
            },
            {
              name: '笔数详情',
              type: 'pie',
              radius: ['45%', '60%'],
              labelLine: {
                length: 30
              },
              label: {
                formatter: '{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c}  {per|{d}%}  ',
                backgroundColor: '#F6F8FC',
                borderColor: '#8C8D8E',
                borderWidth: 1,
                borderRadius: 4,
                rich: {
                  a: {
                    color: '#6E7079',
                    lineHeight: 22,
                    align: 'center'
                  },
                  hr: {
                    borderColor: '#8C8D8E',
                    width: '100%',
                    borderWidth: 1,
                    height: 0
                  },
                  b: {
                    color: '#4C5058',
                    fontSize: 14,
                    fontWeight: 'bold',
                    lineHeight: 33
                  },
                  per: {
                    color: '#fff',
                    backgroundColor: '#4C5058',
                    padding: [3, 4],
                    borderRadius: 4
                  }
                }
              },
              data: [
                { value: this.customExpenditure.expenditureNum, name: '支出笔数' },
                { value: this.customExpenditure.incomeNum, name: '收入笔数' }
              ]
            }
          ]
        };
        myChart.setOption(option)
      },
      /**
       * 获取自定义查询 支出、收入以及笔数
       */
      getCustomExpenditure(){
        http.post("/bill/getCustomExpenditure", this.searchBillParam).then(response => {
          let res = response.data;
          if (res.status === 'error'){
            // 401是token过期跳转的
            if (res.code !== 401){
              this.$message.error(res.msg);
            }
            return
          }
          if (res.data){
           this.customExpenditure.data = res.data
           this.customExpenditure.expenditureNum = res.data.expenditureNum
           this.customExpenditure.incomeNum = res.data.incomeNum
           this.customExpenditure.expenditure = res.data.expenditure
           this.customExpenditure.income = res.data.income

          } else {
            this.customExpenditure.data = res.data
            this.customExpenditure.expenditureNum = 0
            this.customExpenditure.incomeNum = 0
            this.customExpenditure.expenditure = 0
            this.customExpenditure.income = 0
          }
          this.initCustomExpenditure()

        }).catch(error => {
          this.$message.error(error.message);
        })
      },
    },
    mounted(){
      this.getBillType()
      this.getMemberFamilyAll()
      this.getCustomBillList()
      this.getBillingGroupList()
    },
  }
</script>

<style scoped>

  .echarts-title {
    font-size: 16px;
    text-align: center;
    font-weight:900
  }

  .echarts-table {
    /*max-width: 600px;*/
    max-height: 550px;
    /*min-width: 600px;*/
    min-height: 550px;
  }

  .echarts-content{
    /*width: 600px;*/
    height: 550px;
  }

</style>
